<template>
    <picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value" mode="multiSelector" style="display:flex;justify-content: space-between;">
        <slot></slot>
    </picker>
</template>

<script>
let selectVal = ['', '', '']
export default {
    data() {
        return {
            value: [0, 0, 0],
            array: [],
            index: 0,
            AllAddress: []
        }
    },
    created() {
        this.getJson()
    },
    methods: {
        // 初始化地址选项
        initSelect() {
           
            this.updateSourceDate() // 更新源数据
                .updateAddressDate() // 更新结果数据
                .$forceUpdate()  // 触发双向绑定
        },
        getJson() {
            uni.request({
                method: "get",
                url: "https://yl.weilankangyang.com/static/mini_program/json/areaData.json",
                success: (res) => {
                    console.log(res.data, "Resss")
                    this.AllAddress = res.data
                    if(this.AllAddress){
                        this.initSelect()
                    }
                },
                fail: (err) => {
                    uni.showToast({
                        title: '请求接口失败',
                        icon: 'none'
                    })
                }
            })
        },
        // 地址控件改变控件
        columnchange(d) {
            this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
                .updateSourceDate() // 更新源数据
                .updateAddressDate() // 更新结果数据
                .$forceUpdate()  // 触发双向绑定
        },

        /**
         * 更新源数据
         * */
        updateSourceDate() {
            this.array = []
            this.array[0] = this.AllAddress.map(obj => {
                return {
                    name: obj.name
                }
            })
            this.array[1] = this.AllAddress[this.value[0]].cityList.map(obj => {
                return {
                    name: obj.name
                }
            })
            this.array[2] = this.AllAddress[this.value[0]].cityList[this.value[1]].areaList.map(obj => {
                return {
                    name: obj.name
                }
            })
            return this
        },

        /**
         * 更新索引
         * */
        updateSelectIndex(column, value) {
            let arr = JSON.parse(JSON.stringify(this.value))
            arr[column] = value
            if (column === 0) {
                arr[1] = 0
                arr[2] = 0
            }
            if (column === 1) {
                arr[2] = 0
            }
            this.value = arr
            return this
        },

        /**
         * 更新结果数据 
         * */
        updateAddressDate() {
            selectVal[0] = this.array[0][this.value[0]].name
            selectVal[1] = this.array[1][this.value[1]].name
            selectVal[2] = this.array[2][this.value[2]].name
            return this
        },

        /**
         * 点击确定
         * */
        bindPickerChange(e) {
            this.$emit('change', {
                index: this.value,
                data: selectVal,
                array: this.array
            })
            return this
        }

    }
}
</script>

<style>
</style>

